<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>表格页面</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">

	<link rel="stylesheet" href="../../assets/gougu/css/gougu.css">
</head>

<body>
	<div class="p-3">
		<div class="gg-tab-bar border-t border-x">
			<div class="layui-row">
				<div class="layui-col-md6 gg-tab">
					<ul class="gg-tab-title big">
						<li class="tab-this" data-type="0">全部</li>
						<li data-type="1">需求</li>
						<li data-type="2">设计</li>
						<li data-type="3">研发</li>
						<li data-type="4">缺陷</li>
					</ul>
				</div>
				<div class="layui-col-md6 py-2 px-3" style="text-align:right">
					<div class="layui-btn-group mr-4">
						<button type="button" data-event="show" class="layui-btn layui-btn-sm layui-btn-normal"><i
								class="layui-icon">&#xe62d;</i>列表</button>
						<button type="button" data-event="show" class="layui-btn layui-btn-sm layui-btn-primary"><i
								class="layui-icon">&#xe630;</i>看板</button>
						<button type="button" data-event="show" class="layui-btn layui-btn-sm layui-btn-primary"><i
								class="layui-icon">&#xe637;</i>日历</button>
					</div>
					<button class="layui-btn layui-btn-sm add-new">+ 新建任务</button>
				</div>
			</div>
		</div>
		<div class="gg-form-bar border-t border-x">
			<form id="taskForm" class="layui-form">
				<div class="layui-input-inline" style="width:100px;">
					<select name="flow_status" lay-filter="status">
						<option value="">任务状态</option>
						<option value="1">未开始</option>
						<option value="2">进行中</option>
						<option value="3">已完成</option>
						<option value="4">已拒绝</option>
						<option value="5">已关闭</option>
					</select>
				</div>
				<div class="layui-input-inline" style="width:100px;">
					<select name="priority" lay-filter="priority">
						<option value="">优先级</option>
						<option value="1">低</option>
						<option value="2">中</option>
						<option value="3">高</option>
						<option value="4">紧急</option>
					</select>
				</div>
				<div class="layui-input-inline" style="width:100px;">
					<select name="cate" lay-filter="cate">
						<option value="">工作类型</option>
							<option value="1">其他</option>
							<option value="2">产品原型</option>
							<option value="3">UI设计</option>
							<option value="4">技术开发</option>
							<option value="5">测试相关</option>
							<option value="6">运维相关</option>
							<option value="7">撰写文档</option>
							<option value="8">需求调研</option>
							<option value="9">需求沟通</option>
							<option value="10">参加会议</option>
						</select>
				</div>
				<div class="layui-input-inline" style="width:180px;">
					<select name="project_id" lay-filter="project">
						<option value="">所属项目</option>
							<option value="1000">勾股DEV一期开发</option>
							<option value="1001">勾股DEV二期开发</option>
							<option value="1002">勾股OA3.0开发</option>
							<option value="1003">勾股CMS3.0</option>
							<option value="1004">勾股BLOG3.0</option>
							<option value="1005">勾股DEV（PRO版）</option>
						</select>
				</div>
				<div class="layui-input-inline" style="width:240px;">
					<input type="text" name="keywords" placeholder="主题/描述内容" class="layui-input" autocomplete="off" />
				</div>
				<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">搜索</button>
				<button type="reset" class="layui-btn-reset" lay-filter="clear">清空</button>
			</form>
		</div>
		<table class="layui-hide" id="list" lay-filter="list"></table>
	</div>
	<script>
		const moduleInit = ['tool'];
		function gouguInit() {
			var table = layui.table, form = layui.form, tool = layui.tool;
			layui.pageTable = table.render({
				elem: '#list',
				title: '任务列表',
				cellMinWidth: 200,
				url: "../../json/table.json", //数据接口
				page: true, //开启分页
				limit: 20,
				cols: [[
					{
						field: 'id', title: '任务编号', width: 80, align: 'center', fixed: 'left', templet: function (d) {
							return 'T' + d.id;
						}
					}
					, {
						field: 'flow_name', title: '状态', align: 'center', width: 80, templet: function (d) {
							var html = '<span class="layui-badge layui-bg-' + d.flow_status + '">' + d.flow_name + '</span>';
							return html;
						}
					}
					, {
						field: 'type_name', title: '类型', width: 60, align: 'center', templet: function (d) {
							var html = '<span class="layui-color-' + d.type + '">' + d.type_name + '</span>';
							return html;
						}
					}
					, {
						field: 'title', title: '任务主题', rowspan: 2, templet: function (d) {
							var html = '<span class="layui-badge layui-bg-' + d.priority + '">' + d.priority_name + '</span> <a class="open-a" data-url="/task/index/view/id/' + d.id + '">' + d.title + '</a>';
							return html;
						}
					}
					, { field: 'director_name', title: '负责人', align: 'center', width: 80 }
					, { field: 'assist_admin_names', title: '协作人', width: 200 }
					, { field: 'cate_name', title: '工作类型', width: 90, align: 'center' }
					, { field: 'plan_hours', title: '预估工时', align: 'center', width: 80 }
					, {
						field: 'end_time', title: '预计结束日期', width: 150, templet: function (d) {
							var html = d.end_time;
							if (d.delay > 0) {
								html += '<span class="layui-color-8 ml-1" style="font-size:12px;">逾期' + d.delay + '天</span>';
							}
							return html;
						}
					}
				]]
			});
		}
	</script>
  <script src="../../assets/layui/layui.js"></script>
  <script src="../../assets/gougu/gouguInit.js"></script>
</body>

</html>